<template>
  <div class="tableColumnScreenBox">
    <a-popover
      placement="bottomRight"
      arrow-point-at-center
      trigger="click"
      :visible="columnScreenVisible"
      @visibleChange="changeColumnScreenVisible">
      <a-checkbox
        slot="title"
        :indeterminate="indeterminate"
        :checked="checkScreenAll"
        @change="onCheckScreenAllChange">
        {{ $t('columnDisplay') }}
      </a-checkbox>
      <a-checkbox-group slot="content" @change="onScreenChange" v-model="displayColumns">
        <ul class="tableColumnScreenLists">
          <li v-for="item in columnOptions" :key="item.value">
            <a-checkbox :value="item.value">
              {{ item.label }}
            </a-checkbox>
          </li>
        </ul>
        <div class="tableColumnScreenBtns">
          <a-button @click="resetScreenColumn">{{ $t('reset') }}</a-button>
          <a-button type="primary" style="margin-left:8px;" @click="saveScreenColumn">{{ $t('save') }}
          </a-button>
        </div>
      </a-checkbox-group>
      <a-icon type="setting" />
    </a-popover>
  </div>
</template>
<script>
export default {
  props: {
    // 表格可展示的所有列
    allColumns: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      columnScreenVisible: false,
      indeterminate: false,
      checkScreenAll: true,
      displayColumns: this.allColumns.map(item => item.dataIndex),
      defaultAllColumnKeys: this.allColumns.map(item => item.dataIndex),
      columnOptions: this.allColumns.map(column => {
        return {
          label: column.title || column.label,
          value: column.dataIndex,
          display: true
        }
      })
    }
  },
  methods: {
    changeColumnScreenVisible (visible) {
      this.columnScreenVisible = visible
    },
    onCheckScreenAllChange (e) {
      this.displayColumns = e.target.checked ? this.defaultAllColumnKeys : []
      this.indeterminate = false
      this.checkScreenAll = e.target.checked
    },
    onScreenChange (checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.defaultAllColumnKeys.length
      this.checkScreenAll = checkedList.length === this.defaultAllColumnKeys.length
    },
    saveScreenColumn () {
      const val = this.displayColumns
      let result = []
      if (val.length) {
        result = this.allColumns.filter(item => {
          return val.includes(item.dataIndex)
        })
      }
      this.$emit('updatecolumn', result)
      this.columnScreenVisible = false
    },
    resetScreenColumn () {
      this.onCheckScreenAllChange({ target: { checked: true } })
      this.saveScreenColumn()
    }
  }
}
</script>
<style lang="less" scoped>
.tableColumnScreenBox {
    text-align: right;
    padding-right: 8px;

    .anticon {
        font-size: 16px;
        cursor: pointer;

        &:hover {
            color: @blockHoverTextColor;
        }
    }
    ul {
    padding-left: 24px;
}
}
</style>
